<section class="gh-canvas">
    <header class="gh-canvas-header">
        <h2 class="gh-canvas-title" data-test-screen-title>Staff users</h2>
        {{!-- Do not show Invite user button to authors --}}
        {{#unless currentUser.isAuthorOrContributor}}
            <section class="view-actions">
                <button class="gh-btn gh-btn-green" {{action "toggleInviteUserModal"}} ><span>Invite people</span></button>
            </section>
        {{/unless}}
    </header>

    {{#if showInviteUserModal}}
        {{gh-fullscreen-modal "invite-new-user"
                              close=(action "toggleInviteUserModal")
                              modifier="action wide"}}
    {{/if}}

    <section class="gh-team">
    {{!-- Show invited users to everyone except authors --}}
    {{#unless currentUser.isAuthorOrContributor}}
        {{#if invites}}
        <section class="apps-grid-container gh-invited-users" data-test-invited-users>
            <span class="apps-grid-title">Invited users</span>
            <div class="apps-grid">

                {{#each sortedInvites as |invite|}}
                    {{#gh-user-invited invite=invite reload=(route-action "reload") as |component|}}
                        <div class="apps-grid-cell" data-test-invite-id="{{invite.id}}">
                            <article class="apps-card-app">
                                <div class="apps-card-left">
                                    <span class="user-list-item-icon">{{svg-jar "email"}}ic</span>
                                    <div class="apps-card-meta">
                                        <h3 class="apps-card-app-title" data-test-email>{{invite.email}}</h3>
                                        <p class="apps-card-app-desc">
                                            {{#if invite.pending}}
                                                <span class="description-error">
                                                    Invitation not sent - please try again
                                                </span>
                                            {{else}}
                                                <span class="description" data-test-invite-description>
                                                    Invitation sent: {{component.createdAt}},
                                                    {{if component.isExpired "expired" "expires"}} {{component.expiresAt}}
                                                </span>
                                            {{/if}}
                                        </p>
                                    </div>
                                </div>
                                <div class="apps-card-right">
                                    <div class="apps-configured">
                                        {{#if component.isSending}}
                                            <span>Sending Invite...</span>
                                        {{else}}
                                            <a class="apps-configured-action red-hover" href="#revoke" {{action "revoke" target=component}} data-test-revoke-button>
                                                Revoke
                                            </a>
                                            <a class="apps-configured-action green-hover" href="#resend" {{action "resend" target=component}} data-test-resend-button>
                                                Resend
                                            </a>

                                            <span class="apps-configured-action gh-badge {{invite.role.lowerCaseName}}" data-test-role-name>{{invite.role.name}}</span>
                                        {{/if}}
                                    </div>
                                </div>
                            </article>
                        </div>
                    {{/gh-user-invited}}
                {{/each}}

            </div>
        </section>
        {{/if}}
    {{/unless}}

    <section class="apps-grid-container gh-active-users" data-test-active-users>
        <span class="apps-grid-title">Active users</span>
        <div class="apps-grid">
            {{!-- For authors/contributors, only show their own user --}}
            {{#if currentUser.isAuthorOrContributor}}
                {{#gh-user-active user=currentUser as |component|}}
                    {{gh-user-list-item user=currentUser component=component}}
                {{/gh-user-active}}
            {{else}}
                {{#vertical-collection sortedActiveUsers
                    key="id"
                    containerSelector=".gh-main"
                    estimateHeight=75
                    as |user|
                }}
                    {{#gh-user-active user=user as |component|}}
                        {{gh-user-list-item user=user component=component}}
                    {{/gh-user-active}}
                {{/vertical-collection}}
            {{/if}}
        </div>
    </section>
    </section>

    {{!-- Don't show if we have no suspended users or logged in as an author --}}
    {{#if (and suspendedUsers (not currentUser.isAuthorOrContributor))}}
    <section class="apps-grid-container gh-active-users" data-test-suspended-users>
        <span class="apps-grid-title">Suspended users</span>
        <div class="apps-grid">
            {{#each sortedSuspendedUsers key="id" as |user|}}
                {{#gh-user-active user=user as |component|}}
                    {{gh-user-list-item user=user component=component}}
                {{/gh-user-active}}
            {{/each}}
        </div>
    </section>
    {{/if}}
</section>
